<!-- 配送商配送准入 查看产品资质-->
<template>
  <div class="channel-dis-pruduct-qualification">
    <el-editable
      :data="topInformation"
      :columns="seeProductQuailficationColumns">
      <template
        slot="default-registerNo"
        slot-scope="scope">
        <div>
          <cell-registration
            :key="scope.row.registerNo"
            :regis-no="scope.row.registerNo"
            :content="'注册证已过期，点击查看详细信息'"
            :status="scope.row.expireStatus"
            :regis-data="scope.row.registInfo"
          />
        </div>
      </template>
    </el-editable>
    <div
      v-viewer
      ref="registration"
      class="registration"
      v-show="false">
      <el-image
        style="width: 250px; height: 150px;"
        :src="registUrl"
        fit="cover" />
    </div>
    <!-- <div
      v-for="(item,index) in productInfoList"
      :key="index"
      class="product-info">
      <div>
        <span>{{ item.type }}</span>
        样式
        <span />
        <span />
      </div>
    </div>-->
    <div
      class="product-info"
      v-if="upperReachesListtwo[0]">
      <div>
        <span>供应商</span>
        <!-- 样式 -->
        <span />
        <span />
      </div>
      <div>
        <el-editable
          style="width: 100%;"
          :data="upperReachesListtwo"
          :columns="SupplierQualiFicationColumns"
        >
          <template
            slot="default-buyPrice"
            slot-scope="{row}">
            <el-button
              type="text"
              :disabled="!row.enterpriseId"
              @click="supplierEnterpriseList(row,'2')">查看</el-button>
          </template>
        </el-editable>
      </div>
    </div>
    <div
      class="product-info"
      v-if="upperReachesListone[0]">
      <div>
        <span>供应商</span>
        <!-- 样式 -->
        <span />
        <span />
      </div>
      <div>
        <el-editable
          style="width: 100%;"
          :data="upperReachesListone"
          :columns="bottomSupplierQualiFicationColumns"
        >
          <template
            slot="default-buyPrice"
            slot-scope="{row}">
            <el-button
              type="text"
              :disabled="!row.enterpriseId"
              @click="supplierEnterpriseList(row,'1')">查看</el-button>
          </template>
        </el-editable>
      </div>
    </div>
    <div class="product-info">
      <div>
        <span>配送商</span>
        <!-- 样式 -->
        <span />
        <span />
      </div>
      <div>
        <el-editable
          style="width: 100%;"
          :data="factoryList"
          :columns="disbutorQualiFicationColumns"
        >
          <template
            slot="default-enterpriseQualification"
            slot-scope="{row}">
            <el-button
              type="text"
              @click="seeEnterpriseList(row)">查看</el-button>
          </template>
        </el-editable>
      </div>
    </div>

    <el-dialog
      title="企业资质"
      :visible.sync="showLicences"
      @close="closeDialog"
      width="1000px">
      <div class="dialog-container">
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick">
          <el-tab-pane
            label="企业信息"
            name="first">
            <RecordInfo
              :record-form="dialogEnterpriseInfo"
              :record-data="dialogEnterpriseInfoObj"
              :columns-num="columnsNum"
            >
              <span slot="businessScope">
                <el-checkbox-group v-model="dialogEnterpriseInfoObj['businessScope']">
                  <el-checkbox
                    v-for="item in businessScope"
                    :key="item.key"
                    :label="item.key"
                    disabled
                  >{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </span>
            </RecordInfo>
          </el-tab-pane>
          <el-tab-pane
            label="财务信息"
            name="second">
            <RecordInfo
              :record-form="dialogFinanceInfo"
              :record-data="dialogFinanceInfoObj"
              :columns-num="columnsNum"
            />
          </el-tab-pane>
          <el-tab-pane
            label="证照信息"
            name="third">
            <!-- <div
              class="license-box-group"
              v-viewer>
              <div
                v-for="(item,index) in lincenBox"
                :key="index"
                class="license-box">
                <div class="licence-url-box">
                  <el-image
                    v-if="item.type === 'pdf'"
                    style="width: 0; height: 0;"
                    :src="defaultImgUrl"
                    fit="scale-down"
                  />
                  <template v-if="item.type === 'pdf'">
                    <i class="iconfont iconpdf" />
                  </template>
                  <el-image
                    v-else
                    style="width: 100%; height: 80%;"
                    :src="item.url"
                    fit="scale-down"
                  />
                </div>
                <footer>
                  <span @click="showLincenBoxDialogDialog(item,index)">详情</span>
                  <span @click="downloadFile(item.url)">下载</span>
                </footer>
              </div> -->
            <div class="card-box">
              <el-card
                class="licenceCard"
                v-for="(i, index) in lincenBox"
                :key="'c' + index"
              >
                <pic-info-card :card-data="i" />
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <el-dialog />
    </el-dialog>
    <!-- <dialog-licence
      :dialog-form-obj="computedDialogForm"
      :dialog-visible="licenceDialogVisible"
      :form-data="formLicenceData"
      :dialog-form-disable="dialogFormDisable"
      @closeDialog="closeLincenBoxDialog"
    > -->
    <!-- 公司名称插槽 -->
    <!-- <template #companyName="{formData}">
        <el-input
          v-model="formData.companyName"
          placeholder="请输入111" />
      </template> -->
    <!-- 经营范围(2002版)插槽 -->
    <!-- <template #businessScope="{formData}">
        <el-cascader
          class="cascader-box"
          :class="{'no-close': dialogFormDisable}"
          v-model="formData.businessScope"
          :show-all-levels="false"
          :options="businessScope2002"
          :props="{expandTrigger: 'click', label: 'name', multiple: true}"
        />有多个版本的经营范围，请分别选择
      </template> -->
    <!-- 经营范围(2007版)插槽 -->
    <!-- <template #businessScopeSecond="{formData}">
        <el-cascader
          class="cascader-box"
          :class="{'no-close': dialogFormDisable}"
          v-model="formData.businessScopeSecond"
          :show-all-levels="false"
          :options="businessScope2017"
          :props="{expandTrigger: 'click', label: 'name', multiple: true}"
        />有多个版本的经营范围，请分别选择
      </template> -->
    <!-- 库房地址插槽 -->
    <!-- <template #storageAddressList="{formData}">
        <ul class="storage-add-list">
          <li
            v-for="(item, index) in formData.storageAddressList"
            :key="index">
            <el-input
              type="textarea"
              v-model="formData.storageAddressList[index]" />
            <el-button
              type="text"
              v-if="index == formData.storageAddressList.length - 1"
              @click.stop="
                formData.storageAddressList.length < 5 &&
                  formData.storageAddressList.push('')
              "
              icon="el-icon-plus"
            />
            <el-button
              type="text"
              v-if="
                index == formData.storageAddressList.length - 1 && index != 0
              "
              @click.stop="formData.storageAddressList.pop()"
              icon="el-icon-minus"
            />
          </li>
        </ul>
      </template> -->
    <!-- </dialog-licence> -->
  </div>
</template>
<script>
import { hasIn, cloneDeep } from 'lodash'
import dialogLicence from '@components/dialog-licence/index.vue'
import RecordInfo from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/record'
import {
  seeProductQuailficationColumns,
  disbutorQualiFicationColumns,
  SupplierQualiFicationColumns,
  bottomSupplierQualiFicationColumns,
  dialogEnterpriseInfo,
  dialogFinanceInfo,
  dialogFormObjbus,
  dialogFormObjorg,
  businessScope, // 企业的经营范围
  dialogFormObjtax
} from './const'
import ElEditable from '@components/el-editable'
import { urlDownload } from '@const/utils.js'
import CellRegistration from '@/moduleComponents/common/detail/cell-registration'
import picInfoCard from '@/moduleComponents/distributorSide/distributionAdmittance/picInfoCard'
import {
  channelCompanygetAcChannelCompanyById,
  companygetAcCompanyInfoAll,
  comProdItemlistComProdItemsById,
  comProdItemfindProdItemByHos,
  channelCompanygetChannelCompanyInfoAll
} from '@const/beforeSettleApi'
export default {
  data () {
    return {
      registUrl: '',
      topInformation: [],
      factoryList: [], // 自己的列表
      upperReachesListone: [], // 第一个上游
      upperReachesListtwo: [], // 第二个上游
      // 头部表格
      seeProductQuailficationColumns,
      // 类型为配送商时的表格
      disbutorQualiFicationColumns,
      // 类型为供应商时的表格 上游企业
      SupplierQualiFicationColumns,
      // 下游企业
      bottomSupplierQualiFicationColumns,
      // 查看企业资质企业信息(弹框)
      dialogEnterpriseInfo,
      // 是否显示企业资质弹框
      showLicences: false,
      // 查看企业资质财务信息(弹框)
      dialogFinanceInfo,
      // 查看产品资质供应链(请求数据,字段和值暂时的,具体看后台字段)
      productInfoList: [{ type: '供应商' }, { type: '供应商' }, { type: '配送商' }],
      activeName: 'first',
      columnsNum: 2,
      // 查看企业资质证照信息(请求数据,字段和值暂时的,具体看后台字段)
      // 营业执照弹出层配置项(证照信息类型为营业执照)
      dialogFormObjbus,
      // 新增医疗器械经营许可证(证照信息为医疗器械许可证)
      dialogFormObjorg,
      // 新增二类备案凭证(新增第二类医疗器械经营备案凭证)
      dialogFormObjtax,
      // 证照弹框是否显示
      licenceDialogVisible: false,
      // 证照详情弹框form表格
      computedDialogForm: {},
      // 证照详情弹框form详情
      formLicenceData: {},
      businessScope2002: [], // 证照弹框的经营范围选择2002版
      businessScope2017: [], // 证照弹框的经营范围选择2017版
      dialogFormDisable: true, // 证照弹框是否禁用form表单
      dialogEnterpriseInfoObj: {}, // 企业信息
      dialogFinanceInfoObj: {}, // 财务信息
      businessScope, // 企业的经营范围
      // 证照信息
      lincenBox: [
        { show: true, type: 'bus', title: '营业执照' },
        { type: 'org', title: '新增医疗器械经营许可证' },
        { type: 'tax', title: '新增第二类医疗器械经营备案凭证' }
      ]
    }
  },
  components: {
    ElEditable,
    RecordInfo,
    dialogLicence,
    CellRegistration,
    picInfoCard
  },
  mounted () {
    this.enterprisequalification()
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    distributorProdItemId () {
      return this.$route.query.distributorProdItemId
    },
    hospitalId () {
      return this.$route.query.hospitalId
    },
    hosProdCode () {
      return this.$route.query.hosProdCode
    }
  },
  methods: {
    async enterprisequalification () {
      await this.$axios({
        method: 'post',
        url: channelCompanygetAcChannelCompanyById,
        data: {
          id: this.distributorProdItemId
        }
      }).then(res => {
        if (hasIn(res, ['data', 'payload'])) {
          this.factoryList.push(res.data.payload[0])
          this.upperReachesListone.push(res.data.payload[1]) // 上游1
          this.upperReachesListtwo.push(res.data.payload[2]) // 上游2
        }
      })
      this.hospitalpcHosDistribu()
    },
    // /api/v2/comProdItem/listComProdItemsById 顶部信息接口
    // 顶部信息接口
    hospitalpcHosDistribu () {
      if (this.id === 'filg') {
        const postData = {
          hospitalId: this.hospitalId, // 医院id
          id: this.distributorProdItemId // 当前数据id
        }
        this.$axios({
          method: 'post',
          url: comProdItemlistComProdItemsById,
          data: postData
        }).then(res => {
          let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
          this.topInformation.push(obj)
          this.$set(this.topInformation[0], 'upEnterpriseName', this.factoryList[0].enterpriseName)
          this.$set(this.topInformation[0], 'hosCode', this.hosProdCode)
        })
      } else {
        this.$axios({
          method: 'post',
          url: comProdItemlistComProdItemsById,
          data: {
            id: this.id, // distributorProdItemId
            hospitalId: this.hospitalId // 随便传个
          }
        }).then(res => {
          if (res.data.code !== '0') return
          this.topInformation.push(res.data.payload)
          this.$set(this.topInformation[0], 'upEnterpriseName', this.factoryList[0].enterpriseName)
          this.$set(this.topInformation[0], 'hosCode', this.hosProdCode)
        })
      }
    },
    // 供应商查看企业资质 this.upperReachesListone
    supplierEnterpriseList (row, num) {
      this.$axios({
        method: 'post',
        url: channelCompanygetChannelCompanyInfoAll,
        data: {
          companyId: row.enterpriseId,
          createCompanyId: num === '1' ? this.factoryList[0].enterpriseId : this.upperReachesListone[0].enterpriseId
        }
      }).then(res => {
        if (hasIn(res, ['data', 'payload'])) {
          // 企业信息 acCompanyBaseVo   companyName
          this.dialogEnterpriseInfoObj = res.data.payload.acCompanyBaseVo || {}
          if (res.data.payload.acCompanyBaseVo.businessScope) {
            this.dialogEnterpriseInfoObj.businessScope = res.data.payload.acCompanyBaseVo.businessScope.split(',')
          }
          // 财务信息  acCompanyFinanceVo
          this.dialogFinanceInfoObj = res.data.payload.acCompanyFinanceVo || {}
          // 证照信息 acCompanyCertificateVos
          this.lincenBox = res.data.payload.acCompanyCertificateVos || []
        }
      })
      this.showLicences = true
    },
    // 配送商查看企业资质
    seeEnterpriseList (row) {
      this.$axios({
        method: 'post',
        url: companygetAcCompanyInfoAll,
        data: {
          cid: row.enterpriseId
        }
      }).then(res => {
        if (hasIn(res, ['data', 'payload'])) {
          // 企业信息 acCompanyBaseVo   companyName
          this.dialogEnterpriseInfoObj = res.data.payload.acCompanyBaseVo || {}
          if (res.data.payload.acCompanyBaseVo.businessScope) {
            this.dialogEnterpriseInfoObj.businessScope = res.data.payload.acCompanyBaseVo.businessScope.split(',')
          }
          // 财务信息  acCompanyFinanceVo
          this.dialogFinanceInfoObj = res.data.payload.acCompanyFinanceVo || {}
          // 证照信息 acCompanyCertificateVos
          this.lincenBox = res.data.payload.acCompanyCertificateVos || []
        }
      })
      this.showLicences = true
    },
    // 查看注册证号
    viewCertificate (url) {
      if (!url) {
        this.$message({
          type: 'warning',
          message: '没有有效的路径'
        })
        return
      }
      this.registUrl = url
      if (/\w(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i.test(url)) {
        setTimeout(() => {
          const viewer = this.$refs['registration'].$viewer
          viewer.view(0)
        }, 600)
        return
      }
      if (url.includes('.pdf')) {
        this.$pdfViewer({ url, title: 'pdf预览' })
      }
    },
    // 关闭查看企业资质弹框 first
    closeDialog () {
      this.activeName = 'first'
      this.showLicences = false
    },
    // tab切换
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 关闭查看证照详情弹框
    closeLincenBoxDialog () {
      this.licenceDialogVisible = false
    },
    // 显示查看证照详情弹框
    showLincenBoxDialogDialog (data, index) {
      const viewer = this.$el.querySelector('.license-box-group').$viewer
      viewer.view(index)
    },
    // 下载
    downloadFile (url) {
      if (!url) return
      urlDownload(url)
    }
  }
}
</script>
<style lang="less" scope>
.channel-dis-pruduct-qualification {
  width: 100%;
  overflow: auto;
  .product-info {
    height: 150px;
    padding-top: 56px;
    display: flex;
    > div:nth-of-type(1) {
      // width: 200px;
      min-width: 200px;
      height: 150px;
      position: relative;
      > span:nth-of-type(1) {
        display: inline-block;
        width: 100px;
        text-align: center;
      }
      > span:nth-of-type(2) {
        margin-left: 17px;
        display: inline-block;
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background-color: rgb(102, 102, 102);
      }
      > span:nth-of-type(3) {
        position: absolute;
        display: block;
        height: 128px;
        width: 5px;
        background-color: rgb(102, 102, 102);
        right: 65px;
        bottom: 0;
      }
    }
    > div:nth-of-type(2) {
      flex: 1;
    }
  }
  .license-box-group {
    // height: 238px; licence-url-box
    width: 100%;
    min-height: 300px;
    .license-box {
      border: 1px solid rgb(205, 210, 220);
      float: left;
      width: 434px;
      height: 238px;
      margin: 15px;
      position: relative;
      > div {
        width: 100%;
        height: 100%;
        > div {
          width: 100%;
          height: 100%;
          display: inline-block;
          padding-left: 16px;
          vertical-align: center;
          box-sizing: border-box;
          position: relative;
          img {
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
      footer {
        border-top: 1px solid rgb(205, 210, 220);
        height: 43px;
        width: 100%;
        position: absolute;
        bottom: 0;
        line-height: 43px;
        span {
          float: left;
          width: 50%;
          height: 37px;
          margin-top: 3px;
          text-align: center;
          line-height: 37px;
          border-right: 1px solid rgb(205, 210, 220);
          color: rgb(35, 135, 234);
        }
      }
    }
  }
  .dialog-container {
    width: 100%;
    // height: 300px;
  }
  .licenceCard {
    display: inline-block;
    width: 376px;
    border-radius: 0;
    box-shadow: initial;
    margin: 0 16px 20px 0;
    position: relative;
  }
  .card-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
// 级联选择器的删除按钮禁用
.cascader-box {
  .el-input__inner {
    border-color: rgb(220, 223, 230);

    &:focus {
      border-color: rgb(220, 223, 230);
    }
  }

  &.no-close {
    .el-tag__close {
      display: none;
    }
  }
}
</style>
